<template>
  <div>
    <div class="form-container">
      <el-form :model="form" ref="form" label-width="200px" label-position="right" :rules="rules">
        <el-form-item prop="images" label="经办人证照">
          <v-unit-auth-images v-model="form.images" :images="images" v-if="this.userInfo.certificationStatus < 2" @managerPhotoFrontOcr="managerPhotoFront"/>
          <v-unit-auth-images v-model="tempImages" :images="images" v-if="this.userInfo.certificationStatus >= 2"/>
        </el-form-item>
        <el-form-item prop="managerName" label="经办人姓名">
          <el-input class="line-input" v-model="form.managerName" placeholder="请输入经办人姓名" v-if="this.userInfo.certificationStatus < 2"></el-input>
          <span v-if="this.userInfo.certificationStatus >= 2">{{this.userInfo.managerName}}</span>
        </el-form-item>
        <el-form-item prop="managerPhoneNumber" label="经办人手机号">
          <el-input class="line-input" maxlength="11" v-model="form.managerPhoneNumber" v-if="this.userInfo.certificationStatus < 2"
                    placeholder="请输入经办人手机号"></el-input>
          <span v-if="this.userInfo.certificationStatus >= 2">{{this.userInfo.managerPhoneNumber}}</span>
        </el-form-item>
        <el-form-item prop="managerIdNumber" label="经办人身份证号">
          <el-input class="line-input" v-model="form.managerIdNumber" placeholder="请输入经办人身份证号" v-if="this.userInfo.certificationStatus < 2"></el-input>
          <span v-if="this.userInfo.certificationStatus >= 2">{{this.userInfo.managerIdNumber}}</span>
        </el-form-item>
        <v-form-title title="签订授权书" v-if="this.userInfo.certificationStatus < 2"/>
        <el-form-item class="signature" prop="managerAgreement">
          <el-checkbox-group v-model="form.managerAgreement" v-if="this.userInfo.certificationStatus < 2">
              <el-checkbox name="managerAgreement" label="1" v-model="form.enterpriseProxyAgree">签订</el-checkbox>
              <!--v-model="form.enterpriseProxyAgree"-->
              <el-button type="text" @click="readProxyAgree(true)">《企业授权委托书》</el-button>
            <span>
            <!--v-model="form.authorizationCertAgree"-->
              <el-checkbox name="managerAgreement" label="2" v-model="form.authorizationCertAgree">签订</el-checkbox>
              <el-button type="text" @click="readProxyAgree(false)">《单位授权书》</el-button>
            </span>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <v-enter-dailog ref="enter-dailog" :userInfo="userInfo" :nowDate="nowDate"/>
    <v-author-dailog ref="author-dailog" :userInfo="userInfo" :nowDate="nowDate"/>
    <div class="operation">
      <el-button type="primary" @click="valid" v-if="this.userInfo.certificationStatus < 2 && this.form.businessAuthorizationStatus === 1" disabled>提交</el-button>
      <el-button type="primary" @click="valid" v-if="this.userInfo.certificationStatus < 2 && this.form.businessAuthorizationStatus !== 1">提交</el-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
  import { Action } from 'vuex-class'

  import vUnitAuthImages from '@/components/unit-auth-images'
  import vFormTitle from '@/components/form-title'
  import vEnterDailog from '../enterpriseAgree'
  import vAuthorDailog from '../authorAgree'

  @Component({
    components: {
      vUnitAuthImages,
      vFormTitle,
      vEnterDailog,
      vAuthorDailog
    }
  })
  export default class Step1 extends Vue {

    nowDate = {}

    @Action getPolicy
    @Prop() userInfo
    tempImages = []
    images = [
      {
        key: 'managerPhotoFront',
        src: '',
        managerName: '身份证正面',
        placeholder: 'https://hpx-boss.oss-cn-qingdao.aliyuncs.com/61afb7a6-904b-43fe-93f3-efc4f713cf08.png'
      },
      {
        key: 'managerPhotoBack',
        src: '',
        managerName: '背面',
        placeholder: 'https://hpx-boss.oss-cn-qingdao.aliyuncs.com/f730fa6a-ca7b-4a57-9944-40b3c861fe29.png'
      }
    ]
    form = {
      managerName: '',
      managerIdNumber: '',
      managerPhoneNumber: '',
      images: [],
      managerAgreement: ['1','2'],
      enterpriseProxyAgree: '1',
      authorizationCertAgree: '1'
    }
    tempAgentForm = {}
    rules = {
      images: [{type: 'array', required: true, message: '请上传相应的图片', trigger: 'change', len: 2}],
      managerName: [{required: true, message: '请输入经办人姓名', trigger: 'blur'}],
      managerIdNumber: [{required: true, message: '请输入经办人证件号码', trigger: 'blur'}],
      managerPhoneNumber: [
        {required: true, message: '请输入经办人手机号码', trigger: 'blur'},
        {
          pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
          message: '手机号码错误',
          trigger: 'blur'
        }
      ],
      managerAgreement: [
        {type: 'array', required: true, message: '请同意签订协议', trigger: 'change', len: 2}
      ]
    }

    //企业授权委托书
    readProxyAgree (way) {
      if(way){
        this.$refs['enter-dailog'].openDialog()
      }else{
        this.$refs['author-dailog'].openDialog()
      }
    }


    valid () {
      this.$refs.form.validate(valid => {
        if (valid) {
          let f = {...this.form}
          f.images.forEach(v => {
            f[v.key] = v.src
          })
          delete  f.images
          this.post(f)
        }
      })
    }
    async post (form) {
      form.enterpriseProxyAgree = '1'
      form.authorizationCertAgree = '1'
      let res: AjaxResponse = await  this.$axios.post('g/gateway/member/businessauthorization', {
        ...form,
        enterpriseUserId: JSON.parse(window.sessionStorage.getItem('certicaDetail')).enterpriseUserId
      })
      this.$utils.tips(res)
      this.sendGet()
    }
    // 提交成功后，重新获取数据，进行回填
    async sendGet () {
      let id = JSON.parse(window.sessionStorage.getItem('userInfo')).userId
      let resD: AjaxResponse = await this.$axios.get(`g/gateway/member/${id}`)
      this.tempAgentForm = resD.data
    }

    async getNowDate () {
      let res: AjaxResponse = await  this.$axios.get('g/gateway/basic/nowdate')
      this.nowDate = res.data;
    }

    async managerPhotoFront (imageUrl) {
        let res: AjaxResponse = await this.$axios.post('g/gateway/ocr/idcard', {
            faceOrBack: 'face',
            imageUrl
        })
        if (res.responseCode === 200) {
            this.form.managerName = res.data.name
            this.form.managerIdNumber = res.data.id_num
        }
    }

    @Watch('userInfo')
    c (userInfo) {
      this.tempAgentForm = { ...userInfo }
      this.platForms()
    }

    mounted () {
      this.getPolicy()
      this.getNowDate()
      if(this.userInfo.certificationStatus >= 2) {
        this.tempImages = [
          {
              key: 'managerPhotoFront',
              src: '',
              managerName: '身份证正面',
              placeholder: JSON.parse(window.sessionStorage.getItem('certicaAccountDetail')).managerPhotoFront
          },
          {
              key: 'managerPhotoBack',
              src: '',
              managerName: '背面',
              placeholder: JSON.parse(window.sessionStorage.getItem('certicaAccountDetail')).managerPhotoBack
          }
        ]
        // this.form.enterpriseProxyAgree = true
      }
      if (this.userInfo.id) {
          this.c(this.userInfo)
      }
    }
    platForms () {
      // this.form.managerName = this.tempAgentForm.managerName
      // this.form.managerIdNumber = this.tempAgentForm.managerIdNumber
      // this.form.managerPhoneNumber = this.tempAgentForm.managerPhoneNumber
      // this.form.managerName = this.tempAgentForm.managerName
      for (let key in this.tempAgentForm) {
          if (this.tempAgentForm.hasOwnProperty(key)) {
              this.form[key] = this.tempAgentForm[key]
          }
      }
      this.rules.images[0].len = this.tempAgentForm.certType + 2
      this.images.forEach(item => {
          item.src = this.tempAgentForm[item.key]
      })
      this.form.images = this.images.filter(v => v.src)
      // this.form.enterpriseXingYeId = this.tempAgentForm.enterpriseXingyeId
      // this.$refs.address.init([this.tempAgentForm.areaProvince, this.tempAgentForm.areaCity, this.tempAgentForm.areaDistrict])
      // this.$refs.legalAddressArray.init([this.tempAgentForm.legalProvince, this.tempAgentForm.legalCity, this.tempAgentForm.legalDistrict])
    }
  }
</script>
<style lang="less" scoped>
  .form-container {
    width: 1180px;
    margin: 0 auto;
    padding: 60px 0 30px;
  }

  .operation {
    text-align: center;
    font-size: 14px;
    color: #999;
    .el-button {
      margin: 30px 0;
    }
  }

  .el-steps {
    margin-bottom: 60px;
  }

  .signature {
    display: flex;
    font-size: 14px;
    text-align: center;
    span {
      flex: 1;
    }
  }
</style>
